<template>
  <div>
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column prop="id" label="编号"> </el-table-column>
      <el-table-column prop="dt" label="日期"> </el-table-column>
      <el-table-column prop="name" label="名字"> </el-table-column>
      <el-table-column prop="addrres" label="地址"> </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 3, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],//表格的数据
      currentPage:1,//当前页
      total:1,//总行数
      pageSize:1//每页显示数
    };
  },
  methods: {
    fill() {
      //调用axios中的get方法
      this.$http
        .get("/api/get/users",{
          params:{
            currentPage:this.currentPage,
            pageSize:this.pageSize
          }
        })
        .then((res) => {
          console.info(res);
          this.tableData = res.data.data;
          this.total=res.data.total;
        })
        .catch((err) => {
          console.info(err);
        });
    },
     //每页显示数改变时会触发
      handleSizeChange(val){
        //console.info(val);
        this.pageSize=val;
        this.fill();

      },
      //当前页码改变事件
      handleCurrentChange(val){
        this.currentPage=val;
        this.fill();
          //console.info(val);
      }
    
  },
  mounted() {
    this.fill();
  },
};
</script>